<template>
  <div class="configuration-inline">
    <a-row :gutter="[48, 8]" wrap>
      <a-col :span="12" class="field-text">Sales Amount</a-col>
      <a-col :span="12" class="field-text">Commission Rate</a-col>
      <a-col :span="12">
        <a-row>
          <a-col :span="10">
            <a-input-number
              :formatter="formatter"
              :parser="value => value.replace(/\$\s?|(,*)/g, '')"
              :min="0"
              style="width: 100%"
              :precision="2"
              :controls="false"
              disabled
              :value="fromValue"
            >
              <template #addonAfter> <span style="color: rgba(0, 0, 0, 0.45)">K</span> </template>
            </a-input-number>
          </a-col>
          <a-col :span="4" style="text-align: center">
            <span class="field-text" style="line-height: 30px">To</span>
          </a-col>
          <a-col :span="10">
            <a-input-number
              v-model:value="toValue"
              :formatter="formatter"
              :parser="value => value.replace(/\$\s?|(,*)/g, '')"
              :min="fromValue"
              :max="100000000"
              style="width: 100%"
              :precision="2"
              :controls="false"
              :disabled="isLast"
            >
              <template #addonAfter> <span style="color: rgba(0, 0, 0, 0.45)">K</span> </template>
            </a-input-number>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-input-number v-model:value="factorValue" :min="0" style="width: 100%" :precision="2" :controls="false">
          <template #addonAfter> <span style="color: rgba(0, 0, 0, 0.45)">%</span> </template>
        </a-input-number>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const formatter = value => {
  const splitNumber = value.split('.')
  if (splitNumber.length === 1) {
    return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  } else {
    return `${splitNumber[0]}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + `.${splitNumber[1]}`
  }
}
const props = defineProps({
  from: {
    type: [Number, null]
  },
  to: {
    type: [Number, null]
  },
  factor: {
    type: [Number, null]
  },
  isLast: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:to', 'update:factor'])
const toValue = computed({
  get: () => (props.to !== null ? props.to / 1000 : null),
  set: value => emits('update:to', value !== null ? value * 1000 : null)
})
const fromValue = computed(() => (props.from !== null ? (props.from / 1000).toFixed(2) : null))
const factorValue = computed({
  get: () => (props.factor !== null ? (props.factor * 100).toFixed(0) : null),
  set: value => emits('update:factor', value !== null ? value / 100 : null)
})
</script>

<style scoped></style>
